<!-- jQuery start -->
<section id="jquery-table">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">jQuery</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body card-dashboard ">
                        <p>jQuery is a library, which makes DOM manipulations and event handling easier. Handson table is fully compatible with jQuery - the small example below shows that the integration between the two is quick and intuitive. In order to use Handson table as a jQuery plugin, you need to do some basic preparation:</p>
                        <div class="table-responsive">
                            <div id="jQuery" class="hot handsontable htRowHeaders htColumnHeaders"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- jQuery end -->

<!-- ChromaJS start -->
<section id="chromajs-table">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">ChromaJS</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body card-dashboard ">
                        <p>The following demo shows an example of using heatmaps for the values in the grid's columns. Changing the values in the grid automatically recalculates the font color for the whole column, thereby updating a heatmap. The dynamic color scale calculation is done using the excellent Chroma.js.</p>
                        <div class="table-responsive">
                            <div id="chromaJS" class="hot handsontable htRowHeaders htColumnHeaders"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ChromaJS end -->